<template>
  <div>
    <ul class="message-container">
      <li 
        v-for="item in data" 
        :key="item.id" 
        class="message-item"
      >
        <a class="user-avatar">
          <img 
            class="avatar-item" 
            :src="resolveAvatar(item)" 
          />
        </a>
        <div class="main">
          <div class="info">
            <div class="user-info">
              <a class="username">{{ resolveUsername(item) }}</a>
              <div class="interaction-hint">
                <span>{{ item.time }}</span>
              </div>
            </div>

            <div 
              class="interaction-content" 
              @click="handleItemClick(item)"
            >
              <span>{{ item.content }}</span>
              <div 
                v-if="item.count" 
                class="msg-count"
              >
                {{ item.count }}
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { PropType } from 'vue'

type MessageItem = {
  id: number
  type?: string
  content: string
  time: string
  count?: number
  user?: {
    avatar: string
    name: string
  }
}

// const props = 
defineProps({
  data: {
    type: Array as PropType<MessageItem[]>,
    required: true
  }
})

const router = useRouter()

const resolveAvatar = (item: MessageItem) => {
  return item.user?.avatar || getDefaultAvatar(item.type)
}

const resolveUsername = (item: MessageItem) => {
  return item.user?.name || getSystemLabel(item.type)
}

const getDefaultAvatar = (type?: string) => {
  switch(type) {
    case 'system':
      return '/default-system-avatar.png'
    case 'interaction':
      return '/default-interaction-avatar.png'
    default:
      return '/default-user-avatar.png'
  }
}

const getSystemLabel = (type?: string) => {
  switch(type) {
    case 'system':
      return '系统通知'
    case 'interaction':
      return '互动消息'
    default:
      return '未知消息'
  }
}

const handleItemClick = (item: MessageItem) => {
  if (item.type === 'system') {
    // 处理系统消息点击
    return
  }
  router.push({ 
    path: '/chat',
    query: { id: item.id }
  })
}
</script>

<style lang="less" scoped>
.message-container {
  width: 40rem;
  .message-item {
    display: flex;
    flex-direction: row;
    padding-top: 24px;

    .user-avatar {
      margin-right: 24px;
      flex-shrink: 0;

      .avatar-item {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 100%;
        border: 1px solid rgba(0, 0, 0, 0.08);
        object-fit: cover;
      }
    }

    .main {
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      flex-direction: row;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .info {
        flex-grow: 1;
        flex-shrink: 1;

        .user-info {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
          .username {
            color: #333;
            font-size: 16px;
            font-weight: 600;
          }
          .interaction-hint {
            font-size: 12px;
            color: rgba(51, 51, 51, 0.6);
          }
        }

        .interaction-content {
          display: flex;
          font-size: 14px;
          color: #333;
          line-height: 140%;
          cursor: pointer;
          justify-content: space-between;
          align-items: center;
          .msg-count {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            color: #fff;
            background-color: red;
            text-align: center;
            border-radius: 100%;
          }
        }
      }
    }
  }
}
</style>